{"componentChunkName":"component---src-templates-studio-page-js","path":"/studio/img_flow","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🌄 图片处理工作流","noFooter":false,"description":"前端图片流，给定一个处理流程，然后按照流程处理图片，目前可以做批量切图、重命名和压缩。","date":"2021-12-03","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='458'%3e%3cpath%20d='M164%20255a137%20137%200%20001%2035l-1%205c-2%200-1%2030%201%2030h82c2%200%203-29%201-30v-10l1-16v-14l-43-1-42%201m3%205v3h23v-5h-23v2m141%208c-2%202-2%2013%200%2014%202%200%202%209%200%2010-2%200-2%2011-1%2013l44%201h42v-18l-1-20c-2-2-82-2-84%200m2%205c-1%202%201%203%2013%203%2011%200%2011%200%2011-2s-1-2-12-2l-12%201m10%2025c0%202%201%202%208%202h30c2%200%203%200%203-2s-7-3-8-1h-1l-2-1-2%201h-1c-1-1-13-1-13%201h-1c0-2-1-2-1-1h-2c-3-2-10-1-10%201M11%20309c-2%201-1%2034%200%2035l43%201h41l1-3v-34H54l-43%201m296%2031l1%2013v9l-1%2013%201%2012h85v-58l-43-1h-43v12m3-7c-1%202%202%203%2013%203%2010%200%2011%200%2011-2s-1-2-12-2l-12%201m-102%2012l1%209%201%205-1%205c-2%200-1%2018%201%2018h82c2%200%203-18%201-18v-10l1-9v-8l-43-1h-43v9m-101-4v13l1%205-1%205-1%206%201%207h42l43-1v-12l-1-5%201-5v-13c-2-2-83-2-85%200m149%2024l-5%201h-13c-3-1-4%200-4%201%200%202%200%202%201%201h26l4%201h7c2%200%203%200%203-2s0-3-1-2h-18m-19%208c-2%200-3%201-3%202l15%201c12%200%2015-1%2015-2%200-2-13-2-20-1h-7'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":0.8738019169329073,"src":"/static/9c22131915ce4498e9fcd0b892ecfb52/fbb15/img_flow.png","srcSet":"/static/9c22131915ce4498e9fcd0b892ecfb52/82675/img_flow.png 500w,\n/static/9c22131915ce4498e9fcd0b892ecfb52/fef60/img_flow.png 1000w,\n/static/9c22131915ce4498e9fcd0b892ecfb52/fbb15/img_flow.png 1094w","srcWebp":"/static/9c22131915ce4498e9fcd0b892ecfb52/f71dc/img_flow.webp","srcSetWebp":"/static/9c22131915ce4498e9fcd0b892ecfb52/7fe04/img_flow.webp 500w,\n/static/9c22131915ce4498e9fcd0b892ecfb52/d619e/img_flow.webp 1000w,\n/static/9c22131915ce4498e9fcd0b892ecfb52/f71dc/img_flow.webp 1094w","sizes":"(max-width: 1094px) 100vw, 1094px"}}},"noGlobalStyles":false,"bannerCredit":null,"slug":"/studio/img_flow","tags":["talking"]},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"img_flow\",\n  \"title\": \"🌄 图片处理工作流\",\n  \"tech\": \"other\",\n  \"date\": \"2021-12-03 16:34:10\",\n  \"description\": \"前端图片流，给定一个处理流程，然后按照流程处理图片，目前可以做批量切图、重命名和压缩。\",\n  \"titleColor\": \"#fff\",\n  \"btnStyle\": \"darkBlue\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/img_flow.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/img_flow\"\n  }, \"\\u56FE\\u7247\\u5904\\u7406\\u5DE5\\u4F5C\\u6D41\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"ccf05d7c-8ca7-59d2-b4e1-1fe4c51fe20b","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/common/k_vrc.md","id":"0b68b7e1-7721-5923-8150-d5b270edf14d","parent":{"name":"k_vrc","sourceInstanceName":"studio"},"excerpt":"开发详情可以到  机器人眼睛动画的实现 预览可以到  机器人眼睛动画的演示","fields":{"title":"🤖 机器人眼睛动效","slug":"/studio/k-vrc","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","date":"2022-09-03","redirects":null,"datetime":"2022-09-03 16:34:10","categories":[],"series":null,"tags":["talking"],"status":"online"},"frontmatter":{"published":null,"tags":["talking"],"theme":null,"slug":"k-vrc","date":"2022-09-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"k-vrc\",\n  \"title\": \"🤖 机器人眼睛动效\",\n  \"tech\": \"other\",\n  \"date\": \"2022-09-03 16:34:10\",\n  \"description\": \"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。\",\n  \"titleColor\": \"#fff\",\n  \"btnStyle\": \"darkBlue\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/k_vrc.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u5F00\\u53D1\\u8BE6\\u60C5\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/k-vrc-vector-cozmo\"\n  }, \"\\u673A\\u5668\\u4EBA\\u773C\\u775B\\u52A8\\u753B\\u7684\\u5B9E\\u73B0\")), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/k_vrc\"\n  }, \"\\u673A\\u5668\\u4EBA\\u773C\\u775B\\u52A8\\u753B\\u7684\\u6F14\\u793A\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/common/widgets.md","id":"1753b377-af77-5e94-aaca-21a3e754e2ea","parent":{"name":"widgets","sourceInstanceName":"studio"},"excerpt":"预览可以到  小部件 Widgets","fields":{"title":"🍱 小部件 Widgets","slug":"/studio/app_widgets","description":"小部件是规定了普适的UI框能力🍱，网格布局还要紧凑的信息和功能，整齐又有趣。","date":"2021-11-03","redirects":null,"datetime":"2021-11-03 16:34:10","categories":[],"series":null,"tags":["talking"],"status":"online"},"frontmatter":{"published":null,"tags":["talking"],"theme":null,"slug":"app_widgets","date":"2021-11-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"app_widgets\",\n  \"title\": \"🍱 小部件 Widgets\",\n  \"tech\": \"other\",\n  \"date\": \"2021-11-03 16:34:10\",\n  \"description\": \"小部件是规定了普适的UI框能力🍱，网格布局还要紧凑的信息和功能，整齐又有趣。\",\n  \"titleColor\": \"#fff\",\n  \"btnStyle\": \"darkBlue\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/widgets.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/widgets\"\n  }, \"\\u5C0F\\u90E8\\u4EF6 Widgets\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}